// pages/control/component/controlCard/controlCard.js

const util=require("../../../../utils/util");

/**
 * @file control模块的card组件，统一control卡片的标题、选择器（可选）还有样式
 * 
 * @example isn't选择器，见insure_ucharts.js;
 * html
 * <summaryData
 *     summary="{{productionSummary}}"
 *     item_layout="vertical-reverse"
 * ></summaryData>
 * 
 * js
 * data:{
 *    productionSummary:[{  
 *    title:"总共(个)",
 *    info:"8万"
 *  },{
 *    title:"占比",
 *    info:"30%"
 *  }],    
 *  photoSummary:[{  
 *    title:"总共(次)",
 *    info:"160"
 *  },{
 *    title:"平均(次)",
 *    info:"8"
 *  }],
 * }
 * 
 * json
 * 略
 * 
 * 
 * @example is选择器，见production_uchart.js;
 * html
 ** <card
 *   title="产品扫描次数"
 *   bindcomfirmPicker="receiveTapPicker"
 *   pickerValue="{{pickerValue}}"
 *   pickerOptions="{{pickerOptions}}"
 *   pickerTitle="{{pickerTitle}}"
 *   pickerText="{{pickerValue[0]}}"
 * >
 * 
 * js
 * data:{
 *   pickerValue:['近30天'],
 *   pickerOptions:[
 *     { label: '近7天', value: '近7天' },
 *     { label: '近30天', value: '近30天' },
 *     { label: '近180天', value: '近180天' }
 *   ],
 *   pickerTitle:"选择图表周期",
 * }
 * receiveTapPicker(e){
 *  console.log('选择了：'+e.detail.pickerValue[0])
 * },
 * 
 * wxss
 * 无
 * 
 * json
 * 略
 */

Component({

  /**
   * 组件的属性列表
   */
  properties: {
    title:{
      type:String,
      value:''
    }, //card标题
    //选择器
    isShowPicker:{
      type:Boolean,
      value:true
    },
    pickerText: {
      type:String,
      value:''
    }, //选择器的text，使用本组件设置选择器第一次出现展示的文本，点击选项后改变为pickerValue，
    //TODO:如何和传进来的value直接绑定
    pickerValue: Array, //选择器选中的值
    pickerOptions: Array, //选择器选项
    pickerTitle:String //选项标题
  },

  /**
   * 组件的初始数据
   */
  data: {
  },

  lifetimes:{
    attached: function () {
      this.dealProperties()
     }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * @private
     */
    dealProperties(){
      if(util.isEmptyObject(this.data.pickerOptions)){
        this.setData({
          isShowPicker:false
        })
      }else if(util.isArrayObject(this.data.pickerValue) || !this.data.pickerText){
        this.setData({
          pickerValue:[this.data.pickerOptions[0]],
          pickerText:this.data.pickerOptions[0]
        })
      }
    },

    //选择器

    /**
     * @public
     * @description 传递pickerValue到使用的组件
     * @param {*} e 
     */
    deliveryPickerValue(){
      const eventData = { pickerValue: this.data.pickerValue };  
      this.triggerEvent('comfirmPicker', eventData);  
    },

    onColumnChange(e) {
      console.log('picker pick:', e);
    },

    onPickerChange(e) {
      const { key } = e.currentTarget.dataset;
      const { value,label } = e.detail;

      console.log('picker change:', e.detail);
      this.setData({
        [`${key}pickerVisible`]: false,
        [`${key}Value`]: value,
        [`${key}Text`]: label.join(' '),
      });
      this.triggerEvent('comfirmPicker', {pickerValue:value});  
    },
    receiveTapPicker(e){
      console.log(e)
    },
    onPickerCancel(e) {
      const { key } = e.currentTarget.dataset;
      console.log(e, '取消');
      console.log('picker1 cancel:');
      this.setData({
        [`${key}Visible`]: false,
      });
    },

    onPicker() {
      console.log(this.data.isShowPicker);
      this.setData({ pickerVisible: true });
    },
  },
})